<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 店铺管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> 详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-detail ref="form" v-model="form" :option="formOption">
            <template slot="photoListForm" slot-scope="scope">
                <div>
                    <img v-for="(d, index) of form.photoList" :src="d.picUrl" style="height: 100px"/>
                </div>
            </template>
            <template slot="payCodeListForm" slot-scope="scope">
                <div>
                    <img v-for="(d, index) of form.payCodeList" :src="d.picUrl" style="height: 100px"/>
                </div>
            </template>
            <template slot="qrcodeListForm" slot-scope="scope">
                <div>
                    <img v-for="(d, index) of form.qrcodeList" :src="d.picUrl" style="height: 100px"/>
                </div>
            </template>
            <template slot="shopLogoListForm" slot-scope="scope">
                <div>
                    <img v-for="(d, index) of form.shopLogoList" :src="d.picUrl" style="height: 100px"/>
                </div>
            </template>
        </avue-detail>
        <el-row type="flex" justify="center">
            <el-button type="primary" @click="goBack">返 回</el-button>
        </el-row>
    </basic-container>
</template>

<script>
    import {getObj} from '../../../api/manage/shop';
    import {formOption} from '../../../const/crud/opc/form_option/shop_detail';
    import {goBack} from "../../../util/util";

    export default {
        data() {
            return {
                form: {},
                formOption: formOption,
                shopId: ''
            }
        },
        created() {
            this.shopId = this.$route.query.res.shopId;
            this.handleDetail();
        },
        methods: {
            handleDetail() {
                getObj(this.shopId).then(response => {
                    this.form = response.data.data;
                }).catch(() => {
                    this.goBack();
                });
            },
            goBack(time = 1000) {
                goBack(this, time);
            }
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }
</style>


